<template>
	<view class="page-main">
		<CustomNavBar :title="option.title"></CustomNavBar>
		<view class="page-search">
			<view class="page-search-input">
				<uni-search-bar radius="5" placeholder="请输入设备ID" clearButton="auto" cancelButton="none" bgColor="#F4F6FB" @confirm="search" v-model="title">
					<uni-icons slot="searchIcon" color="#0060FF" size="18" type="search" @click="search" />
				</uni-search-bar>
			</view>
			<view class="page-search-select">
				<uni-data-select placeholder="设备状态" v-model="deviceStatus" :localdata="range" @change="change" :clear="false"></uni-data-select>
			</view>
		</view>
		<scroll-view class="page-scroll-list" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="onRefresh" @scrolltolower="onTolower">
			<view class='my-unit' v-for="(item,index) in tabData" :key="index">
				<view class="unit-body" @click="getDeviceDetail(item)">
					<image :src="item.src" class="" />
					<view class="list-item">
						<text class="color-999">{{item.name}}</text>
						<view class="list-con">
							<view class="list-tag">
								<text class="list-tag-label">设备类型：</text>
								<text class="list-tag-value">{{item.deviceType.text}}</text>
							</view>
							<view class="list-tag">
								<text class="list-tag-label">产品名称：</text>
								<text class="list-tag-value">{{item.productName}}</text>
							</view>
							<view class="list-tag">
								<text class="list-tag-label">设备ID：</text>
								<text class="list-tag-value">{{item.id}}</text>
							</view>
						</view>
					</view>
					<view :class="item.state.value === 'online' ? 'list-status' : 'list-status list-status-red'">
						<i></i>
						<text>{{item.state.text}}</text>
					</view>

					<view v-if="item.do" class="button-do-group">
						<button class="mini-btn" size="mini" type="primary" @click.stop="switchDo(item.id, 'do1', 1)">1开</button>
						<button class="mini-btn" size="mini" type="default" @click.stop="switchDo(item.id, 'do1', 0)">1关</button>
						<button class="mini-btn" size="mini" type="primary" @click.stop="switchDo(item.id, 'do2', 1)">2开</button>
						<button class="mini-btn" size="mini" type="default" @click.stop="switchDo(item.id, 'do2', 0)">2关</button>
					</view>

				</view>
			</view>
			<view class="list-more">
				<uni-load-more :status="status" />
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import CustomNavBar from "@/components/customNavBar.vue"
	import _g from '@/static/js/global.js'
	export default {
		components:{CustomNavBar},
		data() {
			return {
				tabData: [],
				triggered:false,
				refreshing:false,
				pageIndex:0,
				pageSize:100,
				total:0,
				status: 'more',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				option:{
					pid:'',
					title:''
				},
				title:'',
				deviceStatus:'',
				range: [
					{value:'',text:'设备状态'},
					{value:'notActive',text:'禁用'},
					{value:'offline',text:'离线'},
					{value:'online',text:'在线'}
				],
				terms:[
					{
						type: "and",
						value: '',
						termType: "eq",
						column: "productId"
					}
				]
			}
		},
		onLoad: function(option) {
			this.option = option
			this.terms[0].value = this.option.pid
			this.getList()
		},
		methods: {
			onRefresh() {
					if (this.refreshing) return;
					this.refreshing = true;
					this.triggered = true
					this.getList()
			},
			onTolower(){
				if(this.tabData.length < this.total){
					this.pageIndex = this.pageIndex + 1
					this.getList()
				}
			},
			search(){
				this.searchTitle()
				this.getList()
			},
			searchTitle(){
				console.log(this.title)
				const index = this.terms.findIndex(item => {return item.column === 'id'})
				console.log(index)
				if(index !== -1){
					if(!this.title){
						this.terms.splice(index,1)
					} else {
						let obj = this.terms[index]
						this.$set(obj,'value','%' + this.title + '%')
						this.terms.splice(index, 1, obj)
					}
				} else {
					if(this.title){
						this.terms.push({column:'id',termType:'like',type:'and',value:'%' + this.title + '%'})
					}
				}
				this.pageIndex = 0
			},
			change(){
				this.searchTitle()
				this.pageIndex = 0
				console.log(this.deviceStatus)
				const index = this.terms.findIndex(item => {return item.column === 'state'})
				console.log(index)
				if(index !== -1){
					if(!this.deviceStatus){
						this.terms.splice(index,1)
					} else {
						let obj = this.terms[index]
						this.$set(obj,'value',this.deviceStatus)
						this.terms.splice(index, 1, obj)
					}
				} else {
					if(this.deviceStatus){
						this.terms.push({column:'state',termType:'eq',type:'and',value:this.deviceStatus})
					}
				}
				console.log(this.terms)
				this.getList()
			},
			getList(){
				const that = this
				that.status = 'loading'
				console.log('产品id', that.option.pid);
				const appInstance = getApp();
				_g.apiPost(appInstance.globalData.url + '/api/device-instance/_query', {
					pageIndex: that.pageIndex,
					pageSize: that.pageSize,
					sorts: [{
						name: "createTime",
						order: "desc"
					}],
					terms: [{
						terms: that.terms
					}]
				}, 'POST').then(res => {
					that.triggered = false;
					that.refreshing = false;
					if (res.status == 200) {
						if(that.pageIndex === 0){
							that.tabData = []
						}
						res.result.data.forEach(function(item, index) {
							var data = {
								id: item.id,
								src: item.photoUrl ? item.photoUrl : '/static/images/logo.png',
								name: item.name,
								online: item.state?.value,
								state:item.state,
								deviceType:item.deviceType,
								productName:item.productName,
								do: that.option.pid == '1750083083059986432' ? true : false
							}
							that.tabData.push(data);
						})
						that.total = res.result.total
						if(that.total < that.tabData.length){
							that.status = 'more'
						} else {
							that.status = 'noMore'
						}
					}
				})
			},
			getDeviceDetail(data) {
				//获取设备详情
				uni.navigateTo({
					url: '../devices/devicesDetail?id=' + data.id + '&title=' + data.name
				})
			},
			switchDo: function(id, name, value) {
				const appInstance = getApp();
				var data = {}
				data[name] = value
				console.log(data)
				_g.apiPost(appInstance.globalData.url + '/api/device-instance/' + id + '/property', data, 'PUT').then(res => {
					uni.showToast({
						title: res.message,
						position: 'center',
						icon: res.status === 200 ? 'success' : 'error'
					});
				})
			}
		}
	}
</script>

<style scoped>
	.page-main{
		overflow-y: hidden;
	}
	.page-search{
		width: 100%;
		height: 100upx;
		background: #fff;
		padding: 10upx 20upx;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
	}
	.page-search-input{
		width: 70%;
		height: 100%;
	}
	.page-search-input /deep/ .uni-searchbar{
		padding: 0;
	}
	.page-search-select{
		width: 28%;
	}
	.page-search-select /deep/ .uni-select{
		border:none
	}
	.page-scroll-list{
		width: 100%;
		height: calc(100% - 260upx);
	}
	.my-unit {
		margin: 20upx 0;
		background-color: #ffffff;
		position: relative;
		transform: all 1s;
	}
	.my-unit image {
		width: 150upx;
		height: 150upx;
		margin-right: 20upx;
	}
	
	.unit-body {
		padding: 20upx;
		display: flex;
		flex-wrap: wrap;
	}
	.unit-body .list-item{
		width: calc(100% - 170upx);
		height: 100%;
	}
	.unit-body .list-item text {
		width: 100%;
		font-size: 32upx;
		line-height: 70upx;
	}
	.list-con{
		width: 100%;
	}
	.list-con .list-tag text {
		font-size: 24upx;
		line-height: 40upx;
	}
	.list-con .list-tag .list-tag-label{
		color: #666;
	}
	.list-status{
		width: 120upx;
		height: 50upx;
		position: absolute;
		right: 0;
		top: 20upx;
		display: flex;
		align-items: center;
		align-content: center;
		justify-content: flex-end;
		padding: 0 20upx;
		background-color: #D9DFFD;
		border-radius: 25upx 0 0 25upx;
		box-sizing: border-box;
	}
	.list-status i{
		display: block;
		width: 8upx;
		height: 8upx;
		border-radius: 50%;
		background-color: #092EE7;
	}
	.list-status text{
		font-size: 24upx;
		color: #333;
		margin-left: 10upx;
	}
	.list-status-red{
		background-color: #FAD7DA;
	}
	.list-status-red i{
		background-color: #E60B1C;
	}

	.point-online {
		background-color: green;
		width: 10px;
		height: 10px;
		display: block;
		position: absolute;
		border-radius: 50%;
		margin-top: 17px;
	}

	.point-offline {
		background-color: red;
		width: 10px;
		height: 10px;
		display: block;
		position: absolute;
		border-radius: 50%;
		margin-top: 17px;
	}

	.point-notActive {
		background-color: orange;
		width: 10px;
		height: 10px;
		display: block;
		position: absolute;
		border-radius: 50%;
		margin-top: 17px;
	}
	.button-do-group {
		width: 100%;
		margin-top: 20upx;
		display: flex;
		justify-content: flex-end;
	}
	.button-do-group button {
		margin: 4upx 0 0 20upx;
	}
</style>
